<template>
  <el-menu
    :default-active="'/index'"
    router
    mode="horizontal"
    text-color="white"
    active-text-color="gray"
    style=""
    position="relative"
    v-if="falg"
  >
    <el-menu-item v-for="(item, i) in navList" :key="i" :index="item.name">
      {{ item.navItem }}
    </el-menu-item>

    <a
      href="#nowhere"
      @click="drawer = true"
      type="primary"
      style="color: white; float: right; padding: 20px"
      ><el-icon><Setting /></el-icon></a
    >
    <i
      class="el-icon-menu"
      style="float: right; font-size: 45px; color: #222; padding-top: 8px"
    ></i>
    <el-drawer
      title="个人设置"
      :direction="direction"
      :before-close="handleClose"
    >
      <div @click="recover">
        <span>
          <el-avatar :src="cover" @click="getusername" :size="100"></el-avatar>
        </span>
      </div>

      <div @click="reusername">
        <p>用户姓名：{{ username }}</p>
      </div>

      <!-- <div>
          <el-button type="primary" round @click="changpassword">修改用户名</el-button>
        </div> -->
      <div>
        <el-switch v-model="value1" inactive-text="声音"> </el-switch>
      </div>
      <div>
        <el-button
          type="primary"
          class="xiugaimima"
          plain
          @click="changpassword"
          >修改密码</el-button
        >
      </div>

      <el-button type="primary" class="tuichudenglu" plain v-on:click="finish"
        >退出登录</el-button
      >

      <div>
        <el-button
          type="primary"
          class="zhuxiaozhanghao"
          plain
          v-on:click="destory"
          >注销账号</el-button
        >
      </div>

      <div class="pingjia">
        <span class="demonstration">感谢支持,来评价一下我们吧！</span>
        <el-rate v-model="value2" :colors="colors" show-text> </el-rate>
      </div>
    </el-drawer>
    <h1
    style="
          position: absolute;
          padding-top: 20px;
          right: 43%;
          font-size: 20px;
          font-weight: bold;
          color: aliceblue;
          margin-top: -123px;
          margin-left: 113px;
        "
      class="Navtitle"
    >
      Lcz - Your Mind Palace
    </h1>
    <ResueName ref="reu"></ResueName>
    <Recover ref="rec"></Recover>
  </el-menu>
</template>
  
  <script>
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import en from "element-plus/dist/locale/en.mjs";
//   import Recover from "../library/Recover.vue"
//   import ResueName from "../library/ResueName.vue";
// import axios from "axios";

export default {
  name: "NavMenu",
  indect: ["reload"],
  data() {
    return {
      navList: [
        { name: "/index", navItem: "首页" },
        { name: "/order", navItem: "购物车" },
        { name: "/bookpage", navItem: "书籍库" },
        { name: "/personalpage", navItem: "个人中心" },
      ],
      value1: true,
      drawer: false,
      direction: "rtl",
      username: "",
      busdata: "",
      cover: "",
      falg: false,
      value2: null,
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"], // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
    };
  },

  components: {},
  created() {
    this.busdata = sessionStorage.getItem("busdata");
    console.log("nav this.busdata" + this.busdata);
    if (this.busdata == 200) {
      this.falg = true;
    } else if (this.busdata === 201) {
      this.falg = false;
    }
    console.log(this.falg);
  },
  methods: {},
  mounted: function () {},
};
</script>
  
  
<style scoped>
a {
text-decoration: none;
}

span {
pointer-events: none;
}
.pingjia {
position: absolute;
margin-top: 595px;
margin-left: 150px;
}
.exit-account {
position: absolute;
margin-top: 532px;
margin-left: -39px;
}
/* button.el-button.el-button--primary.is-round {
  position: absolute;

  margin-top: 470px;
    margin-left: -41px;

} */
.xiugaimima {
position: absolute;
margin-top: 426px;
margin-left: -39px;
}
.el-icon-switch-button {
position: absolute;
margin-left: 300px;
}
.tuichudenglu {
position: absolute;
margin-left: -40px;
margin-top: 478px;
}
.zhuxiaozhanghao {
position: absolute;
margin-left: -38px;
margin-top: 531px;
}
.el-menu {
width: 100%;
  position: relative;
  /* margin-top: 0.1%; */
  /* margin-top: 8px; */
  height: 12%;
  margin-left: 0px;
  background-image: url(/src/assets/eva.jpg);
  display: block;
  margin: 0%;
  padding: 0%;
}
</style>
  
  